﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>WMA Grpah</title>
	<link rel="stylesheet" type="text/css" href="../css/dropdown.css">
	<script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.highcharts.com/highcharts.js"></script>
	<script src="http://code.highcharts.com/modules/exporting.js"></script>
	<script type="text/javascript">
		
$(document).ready(function() {
    Highcharts.setOptions({
		colors: ['#E42217', '#52D017'],
		title: {
            text: 'พื้นที่ให้บริการของการประปานครหลวง'
        },
		subtitle: {
            text: 'สำนักงานภาค1'
        },
		tooltip: {
            valueSuffix: ' ตร.กม.'
        },
		legend: {
			layout: 'vertical',
			align: 'right',
			verticalAlign: 'top',
			x: -40,
			y: 100,
			floating: true,
			borderWidth: 5,
			backgroundColor: '#FFFFFF',
			shadow: true
		},
		plotOptions: {
			bar: {
				dataLabels: {
					enabled: true
				}
			}
		},
		credits: {
			enabled: false
		},
		xAxis: {
			categories: ['สสส.', 'สสพ.', 'สสป.'],
			title: {
				text: 'สาขา'
			}
		},
		yAxis: {
			min: 0,
			title: {
				text: 'พื้นที่ (ตร.กม.)',
				align: 'high'
			},
			labels: {
				overflow: 'justify'
			}
		},
	}); 
	$('#container').highcharts({
            chart: {
                type: 'column'
            },
            series: [{
                name: 'พื้นที่รับผิดชอบ(ตร.กม.)',
                data: [95.34, 122.84, 387.51]
            }, {
                name: 'พื้นที่บริการ (ตร.กม.)',
                data: [94.40, 118.28, 255.99]
            }]
        });
	/*-------------------------------------------------------------- Line Chart ----------------------------------*/
	$("#Line").click(function() { 
		console.log("Line");
		$('#container').highcharts({
				chart: {
					type: 'line'
				},
                                series: [{
                                    name: 'พื้นที่รับผิดชอบ(ตร.กม.)',
                                    data: [95.34, 122.84, 387.51]
                                }, {
                                    name: 'พื้นที่บริการ (ตร.กม.)',
                                    data: [94.40, 118.28, 255.99]
                                }]
			});
		})
	
	/*--------------------------------------------------------------Column Chart ----------------------------------*/
	$("#Bar").click(function() { 
		console.log("Bar");
		$('#container').highcharts({
				chart: {
					type: 'column'
				},
                                series: [{
                                    name: 'พื้นที่รับผิดชอบ(ตร.กม.)',
                                    data: [95.34, 122.84, 387.51]
                                }, {
                                    name: 'พื้นที่บริการ (ตร.กม.)',
                                    data: [94.40, 118.28, 255.99]
                                }]
			});
		})
	
	/*-------------------------------------------------------------- drop down menu1 ----------------------------------*/
		$(".account").click(function()
		{	
			$(".submenu1").hide();		
			var X=$(this).attr('id');
			if(X==1)
			{
				$(".submenu").hide();
				$(this).attr('id', '0');
			}
			else
			{
				$(".submenu").show();
				$(this).attr('id', '1');
			}

		});

			//Mouse click on sub menu
			$(".submenu").mouseup(function()
			{
				return false
			});

			//Mouse click on my account link
			$(".account").mouseup(function()
			{
				return false
			});

			//Document Click
			$(document).mouseup(function()
			{
				$(".submenu").hide();
				$(".account").attr('id', '');
			});
			
			/*----------------------------------------------------------------------------------------------------------*/
			/*-------------------------------------------------------------- drop down menu2 ----------------------------------*/
			$(".account1").click(function()
			{	
				$(".submenu").hide();
				var X=$(this).attr('id');
				if(X==1)
				{
					$(".submenu1").hide();
					$(this).attr('id', '0');
				}
				else
				{
					$(".submenu1").show();
					$(this).attr('id', '1');
				}
	
			});

			//Mouse click on sub menu
			$(".submenu1").mouseup(function()
			{
				return false
			});

			//Mouse click on my account link
			$(".account1").mouseup(function()
			{
				return false
			});

			//Document Click
			$(document).mouseup(function()
			{
				$(".submenu1").hide();
				$(".account1").attr('id', '');
			});
		/*----------------------------------------------------------------------------------------------------------*/
	});
  
</script>
</head>
<body>
<form>
		<table border="0">
			<thead>
				<tr>
					<th><div class="dropdown">
						<a class="account">เปลี่ยนกราฟ</a>	
						<div class="submenu">
							<ul class="root">
							<li ><a id="Line" href="#Line" >Line Chart</a></li>
							<li ><a id="Bar" href="#Column">Bar Chart</a></li>
							</ul>
							</div>
						</div>
					</th>
					<th>
						<div class="dropdown1">
							<a class="account1">เปลี่ยนภาค</a>	
							<div class="submenu1">
								<ul class="root1">
									<li ><a id="Section1" href="section1.html">ภาค1</a></li>
									<li ><a id="Section2" href="section2.html">ภาค2</a></li>
									<li ><a id="Section3" href="section3.html">ภาค3</a></li>
									<li ><a id="Section4" href="section4.html">ภาค4</a></li>
                                                                        <li ><a id="Section4" href="section5.html">ภาค5</a></li>
								</ul>
							</div>
						</div>
					</th>			
				</tr>
			</thead>
		</table>
</form>
<form>
	<div id="container" style="height: 400px;"></div>
</form>
</body>
</html>